<template>
  <div class="mydynamic-content">
    <back-bar title="我的动态" @toBack="toBack" />
    <van-empty
        class="custom-image"
        image="https://img.yzcdn.cn/vant/custom-empty-image.png"
        description="快去发表动态吧~"
        slot="houseItem"
        v-if="myDynamicList.length == 0"
      />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" v-else>
      <van-list
        v-model="aloading"
        :finished="finished"
        @load="onLoad"
        finished-text="我也是有底线的"
      >
        <van-skeleton
          title
          avatar
          :row="2"
          :loading="false"
          v-for="item of myDynamicList"
          :key="item.id"
        >
          <div class="circle-box">
            <show-public-content
              :publicUserInfo="item.authorUser"
              :context="item.context"
              :publicDynaTime="item.dynaTime | showTime"
            >
              <span slot="deletedynamic" class="deletedynamic" @click="toDeleteDynamic(item.id)">删除</span>
            </show-public-content>
            <show-public-img :imgList="item.images" />
            <div v-if="sonRefresh">
              <dian-zan :dynaId="item.id" />
              <common :dynaId="item.id" />
            </div>
          </div>
        </van-skeleton>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import BackBar from "@/components/conten/backbar/BackBar";

import ShowPublicImg from "views/friendcircle/feriendcirclechildcomps/ShowPublicImg";
import ShowPublicContent from "views/friendcircle/feriendcirclechildcomps/ShowPublicContent";
import PublicFriendCircle from "views/friendcircle/feriendcirclechildcomps/PublicFriendCircle";
import DianZan from "views/friendcircle/feriendcirclechildcomps/DianZan";
import Common from "views/friendcircle/feriendcirclechildcomps/Common";

import { changeTime } from "common/utils";

import { getMyDynamic, deleteDynamic } from "network/dynamicManage";
import { mapState } from "vuex";

export default {
  name: "mydynamic",
  components: {
    BackBar,
    PublicFriendCircle,
    ShowPublicContent,
    ShowPublicImg,
    DianZan,
    Common,
  },
  data() {
    return {
      pageNum: 0,
      pageSize: 10,
      size: 0,
      loading: true,
      isLoading: false,
      myDynamicList: [],
      sonRefresh: true,
      aloading: false,
      finished: false,
      publicDynaTime: "",
    };
  },
  methods: {
    toBack() {
      this.$router.back();
    },
    onLoad() {
      this.toGetMyDynamic();
    },
    onRefresh() {
      this.size = 0
      this.pageNum = 1;
      let pageNum = this.pageNum;
      let pageSize = this.pageSize;
      let userId = this.userId;
      this.finished = false;
      getMyDynamic({ pageNum, pageSize, userId }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.myDynamicList = res.data.list;
          this.sonRefresh = false;
          this.$nextTick(() => {
            this.sonRefresh = true;
          });
          setTimeout(() => {
            this.$toast({
              message: "刷新成功",
              position: "bottom",
            });
            this.isLoading = false;
          }, 500);
        } else {
          this.$toast({
            message: "刷新失败",
            position: "bottom",
          });
          this.isLoading = false;
        }
      });
    },
    onRefresh1() {
      this.size=0
      this.pageNum = 1;
      let pageNum = this.pageNum;
      let pageSize = this.pageSize;
      let userId = this.userId;
      this.finished = false;
      getMyDynamic({ pageNum, pageSize, userId }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.myDynamicList = res.data.list;
          this.sonRefresh = false;
          this.$nextTick(() => {
            this.sonRefresh = true;
          });
            this.isLoading = false;
        } else {
          this.$toast({
            message: "刷新失败",
            position: "bottom",
          });
          this.isLoading = false;
        }
      });
    },
    toGetMyDynamic() {
      let userId = this.userId;
      this.pageNum = this.pageNum + 1;
      let pageNum = this.pageNum;
      let pageSize = this.pageSize;
      console.log(this.pageNum);
      getMyDynamic({ pageNum, pageSize }).then((res) => {
        console.log(res);
        this.size++;
        this.myDynamicList.push(...res.data.list);
        this.aloading = false;
        if (this.size >= res.data.lastPage) {
          this.finished = true;
        }
      });
    },
    toDeleteDynamic(id) {
      console.log(id);
      deleteDynamic([id]).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$toast({
            message: "删除成功",
            position: "bottom",
          });
          this.onRefresh();
        } else {
          this.$toast({
            message: "删除失败",
            position: "bottom",
          });
        }
      });
    },
  },
  activated() {
    this.pageNum = 0;
    this.size = 0;
    this.myDynamicList = []
    this.onRefresh1()
    this.toGetMyDynamic();
  },
  computed: {
    ...mapState({
      userId: (state) => state.moduleUser.userId,
    }),
  },
  filters: {
    showTime: (val) => {
      return changeTime(val);
    },
  },
};
</script>

<style scoped>
.mydynamic-content {
  padding-top: 70px;
}
.deletedynamic {
  font-size: 12px;
  margin-top: 10px;
}
.circle-box {
  margin-top: 15px;
}
</style>